jQuery

jQuery 入门
- 1.jQuery 的概念
  - jQuery是一个快速.简洁的Javascript库.
  - j 就是Javascript; Query查询; 意思就是查询js, 把js中的DOM操作做了封装
  - 学习jQuery本质:就是学习调用这些函数(方法).
  - 案例加载jq
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> <style> div { width: 200px; height: 200px; background-color: pink; } </style> </head> <body> <script> // 1.等着页面DOM加载完毕再去执行js代码 // $(document).ready(function () { // $('div').hide(); // }) // 2..等着页面DOM加载完毕再去执行js代码 (简写) ('div').hide(); }) </script> <div></div> </body> </html>
- 2.jQuery的基本使用
  - 2.4 jQuery的顶级对象$
    
    1. $是jQuery的别称,在代码中可以使用jQuery代替＄ ,但一般为了方便直接使用＄
jQuery常用API
- 1.jQuery选择器
  - 1.1jQuery基础选择器
    
    原生JS获取元素方式很多,jQuery给我们做了封装,是获取元素统一标准
    
    ＄("选择器") //里面选择器直接写CSS选择器即可,但是要加引号
  - 1.2jQuery层级选择器
    
    子代选择器
    
    后代选择器
    
    ＄("ul li"); 使用空格,代表后代选择器,获取ul下的所有元素,包括孙子等
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> </head> <body> <ul> <li>12</li> <li>23</li> <li>234</li> <li>45</li> </ul> <script> $(function () { console.log($("ul li")); }) </script> </body> </html>
  - 1.3 隐式迭代(重要)
    
    遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代.
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> </head> <body> <ul> <li>12</li> <li>23</li> <li>234</li> <li>45</li> </ul> <script> $("ul li").css("color", "red") </script> </body> </html>
  - 1.4 jQuery 筛选选择器
    
    ＄("li:first") 获取第一个li元素
    
    ＄("eq(index)") 获取到li元素中 index个元素
    
    ＄("li:odd") 获取到的li元素中,选择索引号为奇数的元素
    
    even 偶数
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> </head> <body> <ul> <li>12</li> <li>23</li> <li>234</li> <li>45</li> </ul> <script> ("ul li:eq(2)").css("color", "red"); }) </script> </body> </html>
  - 1.5jQeury筛选方法(重点)
    
    所有
    
    1.父 parent ＄(".son").parent();
    
    2.子
    
    亲儿子 children()
    
    儿子和孙子 find() 类似后代选择器
    
    代码选中父亲儿子
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> </head> <body> <ul> <li>12</li> <li>23</li> <li>234</li> <li>45</li> </ul> <div class="father"> 123 <div class="son">abc</div> <div> <div class="sunzi">999</div> </div> </div> <script> ("ul li:eq(2)").css("color", "red"); }) // 1.父亲 parent() 最近一级的 $(function () { console.log($(".son").parent()); }) // 2.子 // (1)亲儿子 children() 类似子代选择器 ul>li // $(function () { // $(".father").children(".son").css("color", "red"); // }) // (2)可以选里面所以的孩子包括儿子和孙子 (".father").find("div").css("color", "red"); }) </script> </body> </html>
    
    3.兄弟 siblings(selector) 查找兄弟节点,不包括自己本身
    
    eq(index) ＄("li").eq(2); 相当于＄("li:eq(2))
  - 1.6jQuery 里面的排他思想
    
    想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式.
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> </head> <body> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <script> $(function () { // 1.隐式迭代给所有的按钮都绑定了点击事件 $("button").click(function () { // 2.当前的元素变化背景颜色 $(this).css("background", "pink"); // 3.其余的兄弟去掉背景色隐式迭代 $(this).siblings("button").css("background", "") }) }) </script> </body> </html>
  - jQuery得到当前元素索引号＄(this).index()
  - 1.7链式编程
    
    链式编程是为了节省代码量,看起来更优雅.
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> </head> <body> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <script> // $(function () { // // 1.隐式迭代给所有的按钮都绑定了点击事件 // $("button").click(function () { // // 2.当前的元素变化背景颜色 // $(this).css("background", "pink"); // // 3.其余的兄弟去掉背景色隐式迭代 // $(this).siblings("button").css("background", "") // }) // }) ("button").click(function () { $(this).css("color", "red").siblings().css("color", "") }) }) </script> </body> </html>
    
    $(this).css("color", "red").siblings().css("color", "")
    
    使用链式编程一定注意是哪个对象执行样式.
- 2.jQuery样式操作
  - 2.1操作css方法
    
    jQuery可以使用css方法来修改简单元素样式; 也可以操作类,修改多个样式.
    
    1.参数只写属性名,则是返回属性值
    
    ＄(this).css("color");
    
    2.参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
    
    ＄(this).css("color","red");
    
    3.参数可以是对象形式,方便设置多组样式.属性名和属性值用冒号隔开,属性可以不用加引号
    
    ＄(this).css({"color":"white","font-size":"20px"});
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> <style> div { width: 200px; height: 200px; background-color: pink; } </style> </head> <body> <div></div> <script> ('div').css({ width: 400, height: 400, backgroundColor: "red" }) }) </script> </body> </html>
  - 2.2设置类样式方法
    
    作用等同于以前的classList,可以操作类样式,注意操作类里面的参数不要加点.
    
    1.添加类
    
    ＄("div").addClass("current");
    
    2.移除类
    
    ＄("div").removeClass("current");
    
    3.切换类
    
    ＄("div").toggleClass("current");
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> <style> div { width: 200px; height: 200px; background-color: pink; transition: all 1s; } .red { background-color: red; transform: rotate(360deg); } </style> </head> <body> <div class="red"></div> <script> $(function () { // $('div').click(function () { // // $(this).addClass("red") // }); // $("div").click(function () { // $(this).removeClass("red"); // }); (this).toggleClass("red"); }); }) </script> </body> </html>
    
    里面的类名不要加点
  - 2.3 类操作与className区别
    
    原生JS中className会覆盖元素原先里面的类名
    
    jQuery里面类操作只是对指定类进行操作,不影响原先的类名.
  - 2.5jQuery对象和DOM对象
    
    1.用原生js获取来的对象就是DOM对象
    
    2.jQUery方法获取的元素就是jQuery 对象
    
    3.jQuery对象本质是:利用＄对DOM对象包装后产生的对象(伪数组形式存储)
  - 2.6DOM对象和jQuery对象相互转换
    
    // 1.DOM对象转换为jQuery对象
    
    var myvideo = document.querySelector('video');
    
    $(myvideo);
    
    // 2.jquery对象转换为DOM对象
    
    $('video')[0].play()
    
    $('video').get(0).play()
- 3.jQuery效果
  - 目录
    
    显示隐藏
    
    show()
    
    hide()
    
    toggle()
    
    滑动
    
    slideDown()
    
    slideUp()
    
    slideToggle()
    
    淡入淡出
    
    fadeln()
    
    fadeOut()
    
    fadeToggle()
    
    fadeTo()
    
    自定义动画
    
    animate()
  - 3.1显示隐藏效果
    
    1.显示语法规范
    
    show([speed,[easing],[fn]])
    
    2.显示参数
    
    中括号代表参数都可以省略,无动画直接显示.
    
    speed:三种预定速度之一的字符串("slow","normal",or:"fast")或表示动画时长的毫秒数值(如:1000).
    
    easing:(Optional) 用来指定切换效果,默认是"swing(先快后慢)",可用参数"linear".匀速
    
    fn:回调函数,在动画完成时执行的函数,每个元素执行一次.
    
    2.隐藏语法规范
    
    hide([speed,[easing],[fn]])
    
    2.隐藏参数
    
    中括号代表参数都可以省略,无动画直接显示.
    
    speed:三种预定速度之一的字符串("slow","normal",or:"fast")或表示动画时长的毫秒数值(如:1000).
    
    easing:(Optional) 用来指定切换效果,默认是"swing(先快后慢)",可用参数"linear".匀速
    
    fn:回调函数,在动画完成时执行的函数,每个元素执行一次.
    
    3.切换语法规范
    
    toggle([speed,[easing],[fn]])
    
    2.切换参数
    
    中括号代表参数都可以省略,无动画直接显示.
    
    speed:三种预定速度之一的字符串("slow","normal",or:"fast")或表示动画时长的毫秒数值(如:1000).
    
    easing:(Optional) 用来指定切换效果,默认是"swing(先快后慢)",可用参数"linear".匀速
    
    fn:回调函数,在动画完成时执行的函数,每个元素执行一次.
  - 3.2滑动效果
    
    1.滑动切换效果语法规范
    
    下滑 slideDown([speed,[easing],[fn]])
    
    上滑 slideUp([speed,[easing],[fn]])
    
    切换滑动 slideToggle([speed,[easing],[fn]])
    
    中括号代表参数都可以省略,无动画直接显示.
    
    speed:三种预定速度之一的字符串("slow","normal",or:"fast")或表示动画时长的毫秒数值(如:1000).
    
    easing:(Optional) 用来指定切换效果,默认是"swing(先快后慢)",可用参数"linear".匀速
    
    fn:回调函数,在动画完成时执行的函数,每个元素执行一次.
    
    案例简洁版滑动下拉菜单
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> <style> div { width: 100px; height: 200px; background-color: pink; } </style> </head> <body> <button>上滑</button> <button>下滑</button> <button>切换</button> <div></div> <script> $(function () { // 滑动效果上滑下滑切换 ('div').slideUp() }) ('div').slideDown(); }) ('div').slideToggle(); }) }) </script> </body> </html>
  - 3.3事件切换
    
    hover([over,]out)
    
    over:鼠标移到元素上要触发的函数(相当于mouseenter)
    
    out:鼠标移除元素要触发的函数(相当于mouseleave)
    
    $(".hover").hover(function () {} , function(){ })
    
    案例鼠标经过下滑离开上滑
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> <style> div { width: 100px; height: 200px; background-color: pink; } .hover { background-color: skyblue; width: 130px; height: 30px; margin-top: 20px; } </style> </head> <body> <button>上滑</button> <button>下滑</button> <button>切换</button> <div class="hover">事件切换hover</div> <div></div> <script> $(function () { // 滑动效果上滑下滑切换 // $("button").eq(0).click(function () { // $('div').slideUp() // }) // $("button").eq(1).click(function () { // $('div').slideDown(); // }) // $("button").eq(2).click(function () { // $('div').slideToggle(); // }) ('div').eq(1).slideUp() }, function () { $('div').eq(1).slideDown(); }) }) </script> </body> </html>
    
    只写一个函数,那么鼠标经过和离开都会触发这个函数
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> <style> div { width: 100px; height: 200px; background-color: pink; } .hover { background-color: skyblue; width: 130px; height: 30px; margin-top: 20px; } </style> </head> <body> <button>上滑</button> <button>下滑</button> <button>切换</button> <div class="hover">事件切换hover</div> <div></div> <script> $(function () { // 滑动效果上滑下滑切换 // $("button").eq(0).click(function () { // $('div').slideUp() // }) // $("button").eq(1).click(function () { // $('div').slideDown(); // }) // $("button").eq(2).click(function () { // $('div').slideToggle(); // }) // 1.hover([over,]out)写两个参数第一个是经过 ,第二个是离开 // $(".hover").hover(function () { // $('div').eq(1).slideUp() // }, function () { // $('div').eq(1).slideDown(); // }) // 2.只写一个函数, 那么鼠标经过和离开都会触发这个函数 ('div').eq(1).slideToggle(); }) }) </script> </body> </html>
  - 3.4 动画队列及其停止排队方法
    
    1.动画或效果队列
    
    动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行
    
    2.停止排队
    
    stop()
    
    1.stop()方法用于停止动画或效果
    
    2.注意:stop()写到动画或者效果的前面,相当于停止结束上一次的动画.
    
    $('div').eq(1).stop().slideToggle();
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> <style> div { width: 100px; height: 200px; background-color: pink; } .hover { background-color: skyblue; width: 130px; height: 30px; margin-top: 20px; } </style> </head> <body> <button>上滑</button> <button>下滑</button> <button>切换</button> <div class="hover">事件切换hover</div> <div></div> <script> $(function () { // 滑动效果上滑下滑切换 // $("button").eq(0).click(function () { // $('div').slideUp() // }) // $("button").eq(1).click(function () { // $('div').slideDown(); // }) // $("button").eq(2).click(function () { // $('div').slideToggle(); // }) // 1.hover([over,]out)写两个参数第一个是经过 ,第二个是离开 // $(".hover").hover(function () { // $('div').eq(1).slideUp() // }, function () { // $('div').eq(1).slideDown(); // }) // 2.只写一个函数, 那么鼠标经过和离开都会触发这个函数 ('div').eq(1).stop().slideToggle(); }) }) </script> </body> </html>
  - 3.5淡入淡出效果
    
    (1)淡入淡出效果
    
    1.淡入淡出切换效果语法 fadeTooggle([speed,[easing],[fn]])
    
    fadeTooggle([speed,[easing],[fn]])
    
    2.淡入淡出切换效果参数
    
    中括号代表参数都可以省略,无动画直接显示.
    
    speed:三种预定速度之一的字符串("slow","normal",or:"fast")或表示动画时长的毫秒数值(如:1000).
    
    easing:(Optional) 用来指定切换效果,默认是"swing(先快后慢)",可用参数"linear".匀速
    
    fn:回调函数,在动画完成时执行的函数,每个元素执行一次.
    
    2.淡入 fadeIn([speed,[easing],[fn]])
    
    3.淡出fadeOut([speed,[easing],[fn]])
    
    案例
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> <style> div { width: 100px; height: 200px; background-color: pink; } .hover { background-color: skyblue; width: 130px; height: 30px; margin-top: 20px; } </style> </head> <body> <button>淡入</button> <button>淡出</button> <button>切换淡入淡出</button> <button>修改透明度</button> <div></div> <script> ("button").eq(0).click(function () { $("div").fadeIn(1000) }) ("div").fadeOut(1000) }) ("div").stop().fadeToggle(1000) }) }) </script> </body> </html>
    
    (2)渐进方式调整到指定的不透明度
    
    fadeTo([[speed],opacity,[easing],[fn]])
    
    2.效果参数
    
    1.opacity透明度必须写,取值0-1之间,
    
    2.speed:speed:三种预定速度之一的字符串("slow","normal",or:"fast")或表示动画时长的毫秒数值(如:1000).必须写
    
    3.easing:(Optional) 用来指定切换效果,默认是"swing(先快后慢)",可用参数"linear".匀速
    
    $("div").fadeTo(1000, 0.5)
    
    案例突出显示
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> <style> * { margin: 0; padding: 0; } body { background-color: black; } ul { list-style: none; } .box { width: 1000px; height: 2000px; /* background-color: pink; / margin: 100px auto; } ul li { float: left; width: 300px; height: 300px; / background-color: skyblue; / } ul li img { width: 280px; margin: 10px; / transition: all 0.5s; */ } </style> </head> <body> <div class="box"> <ul> <li><img src="images/c1.jpg" alt=""></li> <li><img src="images/h1.jpg" alt=""></li> <li><img src="images/l1.jpg" alt=""></li> <li><img src="images/m1.jpg" alt=""></li> <li><img src="images/w1.jpg" alt=""></li> <li><img src="images/z1.jpg" alt=""></li> </ul> </div> <script> ("li").hover(function () { $(this).siblings().stop().fadeTo(400, 0.5); }, function () { $("li").stop().fadeTo(400, 1) }) }) </script> </body> </html>
  - 动画都有排队的问题 stop() 写到动画或者效果的前面
  - 3.6自定义动画 animate
    
    1.语法
    
    animate(params,[speed],[easing],[fn])
    
    2.参数
    
    (1)params:想要更改的样式属性,以对象形式传递,必须写. 属性名可以不用带引号, 如果是复合属性则需要采取驼峰命名法 borderLeft. 其余参数都可以省略.
    
    speed:三种预定速度之一的字符串("slow","normal",or:"fast")或表示动画时长的毫秒数值(如:1000).
    
    easing:(Optional) 用来指定切换效果,默认是"swing(先快后慢)",可用参数"linear".匀速
    
    fn:回调函数,在动画完成时执行的函数,每个元素执行一次.
    
    案例
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> <style> div { position: absolute; left: 0; top: 40px; width: 200px; height: 200px; background-color: pink; } </style> </head> <body> <button>点击</button> <div></div> <script> ("button").click(function () { $("div").animate({ left: 500, top: 300, opacity: 0.4, }, 1000) }) }) </script> </body> </html>
- 4.jQuery属性操作
  - 5.1设置或获取元素固有属性值 prop()
    
    固有属性就是元素本身自带的属性比如<a> 元素里面的href
    
    1.获取属性语法
    
    prop("属性")
    
    2.设置属性语法
    
    prop("属性","属性值")
  - 5.2设置或获取元素自定义属性值attr()
    
    用户自己给元素添加的属性,称为自定义属性. 比如div添加index="1"
    
    1.获取属性语法
    
    attr("属性") //类似原生getAttribute
    
    2.设置属性语法
    
    attr("属性","属性值") //类似原生setAttribute()
    
    改方法也可以获取H5自定义属性 data-index
  - 5.3数据缓存data()
    
    data()方法可以在指定的元素上存取数据,并不会修改DOM元素结构.一旦页面刷新,之前存放的数据都将被移除
    
    1.附加数据语法
    
    data("name","value") //向被选元素附加数据
    
    2.获取数据语法
    
    date("name") //向被选元素获取数据
    
    同时,还可以读取HTML5自定义属性data-index,, 得到的是数字型的
- 5.jQuery 内容文本值
  - 主要针对元素的内容还有表单的值操作.
  - 1.普通元素内容html() (相当于原生innerHTML)
    
    html() //获取元素的内容
    
    html("内容") //设置元素的内容
  - 2.普通元素文本内容text() (相当于原生innerText)
    
    text() //获取元素的文本内容
    
    text("文本内容") //设置元素的文本内容
    
    忽略标签
  - 3.表单的值 val() (相当于原生value)
    
    ＄("input").val() ); //获取value值
    
    ＄("input").val("123"); //修改value值为123
  - 案例购物修改小计
    
    $(function () { // 1.全选按钮 // 事件可以使用change ＄(".checkall").change(function () { ＄(".j-checkbox, .checkall").prop("checked", $(this).prop("checked")) }) // 2.如果小复选框被选中的个数等于3 就应该把全选按钮选上 ,否则全选按钮不选 $(".j-checkbox").change(function () { console.log($(".j-checkbox:checked")) if ((".j-checkbox").length) { $(".checkall").prop("checked", true); } else { $(".checkall").prop("checked", false); } }) // 3.增加商品数量模块 $(".increment").click(function () { var n = $(this).siblings(".itxt").val(); n++; $(this).siblings(".itxt").val(n); // 2.小计模块 var p = $(this).parent().parent().siblings(".p-price").html(); p = p.substr(1); // console.log(p); $(this).parent().parent().siblings(".p-sum").html("￥" + (p * n).toFixed(2)); }) // 4.减少商品数量模块 $(".decrement").click(function () { var n = $(this).siblings(".itxt").val(); if (n == 1) { return false; } n--; $(this).siblings(".itxt").val(n); // 2.小计模块 var p = $(this).parents(".p-num").siblings(".p-price").html(); p = p.substr(1); // console.log(p); $(this).parent().parent().siblings(".p-sum").html("￥" + (p * n).toFixed(2)); }) // 5.用户修改文本框的值计算小计模块 $(".itxt").change(function () { var n = $(this).val(); var p = $(this).parents(".p-num").siblings(".p-price").html(); p = p.substr(1); $(this).parent().parent().siblings(".p-sum").html("￥" + (p * n).toFixed(2)); }) })
    
    parents("选择器") 可以返回指定祖先(父)元素
    
    $(this).parents(".p-num")
    
    p = p.substr(1);
    
    截取字符串索引号为1 后面的元素
    
    最后计算的结果可以通过 toFixed(2) 保留2为小数
- 6.jQuery 元素操作
  - 主要是遍历., 创建 ,添加, 删除元素操作
  - 6.1 遍历元素
    
    jQuery隐式迭代是对同一类元素做了同样的操作.如果想要给同一类元素做不同操作,就需要用到遍历.
    
    语法1
    
    ＄("div).each(function(index,domEle) {xxx;} )
    
    1.each() 方法遍历匹配的每一个元素.主要用DOM处理.each每一个
    
    2.里面的回调函数有2个参数:index是每个元素的索引号;demEle 是每个DOM元素对象,不是jquery对象
    
    3.所以要想使用jquery方法,需要给这个dom元素转换为jQuery对象＄(domEle)
    
    案例 each用法
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> </head> <body> <div>1</div> <div>2</div> <div>3</div> <script> ＄(function () { $("div").each(function (i, domEle) { var arr = ["blue", "red", "pink"]; console.log(i); console.log(domEle); $(domEle).css("color", arr[i]); }) }) </script> </body> </html>
    
    语法2
    
    ＄.each(object, function (index, element) {xxx; } ) 输出的是属性名和属性值
    
    1.＄.each() 方法可用于遍历任何对象. 主要用于数据处理, 比如数组,对象类似于 for in 输出的是属性名和属性值
    
    案例遍历元素
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> </head> <body> <div>1</div> <div>2</div> <div>3</div> <script> var arr = ["blue", "red", "pink"]; ("div").each(function (i, domEle) { console.log(i); console.log(domEle); $(domEle).css("color", arr[i]); }) $.each(arr, function (i, ele) { console.log(i); console.log(ele); }) }) </script> </body> </html>
    
    2.里面的函数有2个参数:index 是每个元素的索引号;element 遍历内容
    
    区别
    
    语法1 以后遍历DOM对象
    
    语法2 以后遍历数组,对象用＄.each()
  - 6.2创建元素
    
    语法:
    
    ＄("<li> </li>")
    
    动态的创建了一个<li>
  - 6.3添加元素
    
    1.内部添加
    
    elelment.appent("内容" )
    
    把内容放入匹配元素内部最后面,类似原生appendChild.
    
    ＄("ul").prepeng(li);
    
    内部添加并且放到内容的最前面
    
    2.外部添加
    
    element.after("内容") //把内容放入目标元素后面
    
    element.before("内容") //把内容放入目标元素前面
    
    区别
    
    内部添加元素,生成之后,他们是父子关系
    
    外部添加元素,生成之后,他们是兄弟关系.
  - 6.4删除元素
    
    element.remove() //删除匹配的元素(本身)
    
    element.empty() //删除匹配的元素集合中所有的子节点
    
    element.html("") //清空匹配的元素内容
    
    第二个和第三个一样的
- 7.jQuery尺寸.位置操作
  - 7.1 jQuery 尺寸
    
    width() / height() 取得匹配元素宽度和高度值只算width / height
    
    innerWidth() / innerHieght() 取得匹配元素宽度和高度值包含padding
    
    outerWidth() / outerHeight() 取得匹配元素宽度和高度值包含padding . border
    
    outerWidth(true)/ outerHeight(true) 取得匹配元素宽度和高度值包含padding . borde、margin
    
    ＄("div").windth()
    
    1.以上参数为空,则是获取相应值,返回的是数字型
    
    2.如果参数为数字,则修改相应值
    
    3.参数可以不必写单位
  - 7.2jQuery 位置
    
    位置主要有三个: offset(). position(). scrollTop()/scrollLeft()
    
    1.offset() 设置或获取元素偏移
    
    1.()方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系
    
    2.该方法有2个属性left .top offset().top 用于获取距离文档顶部的距离
    
    console.log($(".fu").offset().left);
    
    3.可以设置元素的偏移:offset({top:10,left:30});
    
    案例
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> <style> * { margin: 0; padding: 0; } .fu { position: relative; top: 100px; left: 100px; width: 300px; height: 300px; background-color: pink; } .zi { position: absolute; top: 10px; left: 10px; width: 100px; height: 100px; background-color: skyblue; } </style> </head> <body> <div class="fu"> <div class="zi"></div> </div> <script> $(function () { console.log($(".fu").offset()); console.log((".fu").offset({ top: 200, left: 200 }) console.log($(".fu").offset()); }) </script> </body> </html>
    
    2.position() 获取元素偏移
    
    1.position() 方法用于返回元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准
    
    这个方法只能获取不能设置偏移
    
    3.scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
    
    scrollTop() 方法设置或返回被选元素被卷去的头部
    
    还可以赋值
    
    ＄(document).scrollTop(100);
    
    案例返回顶部
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> <style> * { margin: 0; padding: 0; } .w { height: 1000px; width: 1300px; margin: 300px auto; background-color: pink; } .guding { display: none; position: fixed; width: 50px; height: 60px; background-color: skyblue; top: 470px; left: 1410px; } </style> </head> <body> <div class="w"></div> <div class="guding">返回顶部</div> <script> (window).scroll(function () { console.log($(document).scrollTop()); if ((".guding").fadeIn(); } else { $(".guding").fadeOut(); } }) $(".guding").click(function () { // ("body, html").stop().animate({ scrollTop: 0 }); }) }) </script> </body> </html> (window).scroll(function () { console.log($(document).scrollTop()); }) }) </script> </body> </html>
    
    animate动画函数里面有个scrollTop属性,可以设置位置
    
    只有元素才能做动画
jQuery 事件
- jQuery 事件注册
  - 1.1 单个事件注册
    
    语法:
    
    element.事件(function(){ })
    
    ＄("div").click(function(){ 事件处理程序})
    
    单个事件注册需要分开来写
- jQuery事件处理
  - 2.1事件处理on() 绑定事件
    
    on()方法在匹配元素上绑定一个或多个事件的事件处理函数
    
    语法:
    
    element.on(events,[selector],fn)
    
    1.events:一个或多个用空格分隔的事件类型,如"click" 或"keydown".
    
    2.selector:元素的子元素选择器.
    
    3.fn:回调函数即绑定在元素身上的侦听函数
    
    on() 方法优势1:
    
    可以绑定多个事件,多个处理事件处理程序.
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> <style> div { width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div></div> <script> $("div").on({ click: function () { $(this).css("background", "skyblue"); }, mouseenter: function () { $(this).css("background", "blue"); }, mouseleave: function () { $(this).css("background", "red"); } }); </script> </body> </html>
    
    多个事件用同一个函数
    
    $("div").on("mouseenter mouseleave", function () { alert(11); })
    
    on() 方法优势2:
    
    可以事件委派操作. 事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素
    
    绑定ul 里面的li有事件
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> <style> div { width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div></div> <ul> <li>111111111</li> <li>222222222</li> <li>333333333</li> </ul> <script> $("div").on("mouseenter mouseleave", function () { alert(11); }) $("ul").on("click", "li", function () { alert(11); }) </script> </body> </html>
    
    on()方法优势3:
    
    动态创建的元素,click()没有办法绑定事件,on()可以给动态生成的元素绑定事件
    
    js后来生成的元素用on
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.min.js"></script> <style> div { width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div></div> <ul>  </ul> <script> $("div").on("mouseenter mouseleave", function () { alert(11); }) // $("ul").on("click", "li", function () { // alert(11); // }) $("li").click(function () { alert("cccccccccc"); }) $("ul").on("click", "li", function () { alert("aaaaaaaaaa"); }) var li = ("ul").append(li); </script> </body> </html>
    
    案例微博发布效果
    
    动态创建的元素无法绑定事件
    
    slideUp(function(){ } ) slideUp里也有回调函数
  - 2.2事件处理off() 解绑事件
    
    off()方法可以移除通过on() 方法添加的事件处理程序
    
    ＄("p").off() //解绑p元素所有事件处理程序
    
    ＄("p").off("click") //解绑p元素上面的点击事件后面的foo时侦听函数名
    
    ＄("ul").off("click","li"); //解绑事件委托
    
    如果有的事件只想触发一次,可以使用one() 来绑定事件.
  - 2.3自动触发事件trigger()
    
    有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致.可以利用定时器自动触发右侧按钮点击事件,不必点击触发.
    
    自动触发事件
    
    1.元素.事件()
    
    ＄("div").click(); 会触发元素的默认行为
    
    2.元素.trigger("事件") ;
    
    ＄("div").trigger("click"); 会触发元素的默认行为
    
    3.元素.triggerHandler("事件")
    
    ＄("div").triggerHandler("click"); 不会触发元素的默认行为比如:输入框闪烁的竖线
- jQuery事件对象
  - 事件被触发,就会有事件对象的产生.
  - element.on(events,[selector],function(event) { } )
  - 阻止默认行为:event.preventDefault() 或者return false
  - 阻止冒泡:event.stopPropagation()
jQuery 其他方法
- jQuery拷贝对象
  - 如果想把某个对象拷贝(合并)给另外一个对象使用,此时可以使用＄.extend() 方法
  - 语法:
    
    ＄.extend([deep] , target , object1 , [objectN])
    
    1.deep:如果设为true为深拷,默认为false浅拷贝
    
    2.target:要拷贝的目标对象
    
    3.object1:待拷贝到第一个对象的对象
    
    4. objectN:待拷贝到第N个对象的对象
    
    5.浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象
    
    6.深拷贝,前面加true,完全克隆(拷贝的对象,而不是地址),修改目标对象不会影响被拷贝对象
- jQuery多库共存
  - jQuery和其他的js库有冲突
    
    jQuery解决方案:
    
    1.把里面的＄符号同一改为jQuery. 比如jQuery("div")
    
    2.jQuery变量规定新的名称:＄.onConflict() var xx=＄.noConflict();
    
    让jQuery释放对＄控制权让用户自己决定
- jQuery插件
  - jQuery插件常用的网站:
    
    1.jQuery插件库 http://www.jq22.com/
    
    2.jQuery之家 http://www.htmlleaf.com/ (推荐)
  - jQuery插件使用步骤:
    
    1.引入相关文件.(jQuery文件和插件文件)
    
    2.复制相关html.css.js(调用插件).
  - 2.图片懒加载(图片使用延迟加载在可提高网页下载速度,它也能帮助减轻服务器负载)
    
    当我们页面滑动到可视区域,再显示图片
    
    我们使用jquery插件库EasyLazyload. 注意,此时的js引入文件和js 调用必须写道DOM元素(图片)最后面
  - 3.全屏滚动(fullpage.js)
    
    gitHub : https://github.com/alvarotrigo/fullPage.js
    
    中文翻译网站:http://www.dowebok.com/demo/2014/77/
  - bootstrap JS插件:
    
    bootstrap 框架也是依赖jQuery开发的,因此必须引入jQuery文件
- 案例 todolist
  - 本地存储里面只能存储字符串的数据格式
  - 把我们的数组对象转换为字符串格式JSON.stringify()
  - 获取本地存储的数据我们需要把里面的字符串数据转换为对象格式JSON.parse()